<!--
 * @Author: your name
 * @Date: 2021-11-28 15:24:20
 * @LastEditTime: 2021-12-08 16:55:49
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \demo\src\views\Search\index.vue
-->
<template>
  <div class="Search">
    <div class="searchbox">
      <van-search
        class="search"
        v-model="value"
        placeholder="请输入小区或地址"
        background="transparent"
        @search="onCity"
      >
        <template #label>
          <div @click="onCity">{{ $store.state.city }}</div>
        </template></van-search
      >
      <div>
        <van-icon class="play" name="play" />
      </div>
      <div><van-icon class="xian" name="minus" /></div>
      <div>
        <van-icon class="home" name="home-o" @click="gomap" />
      </div>
      <div><van-icon name="arrow-left" class="back" @click="goback" /></div>
    </div>
    <div class="Search-Nav">
      <van-dropdown-menu>
        <van-dropdown-item title="区域">
          <template #default>
            <search-popup-area />
          </template>
        </van-dropdown-item>
        <van-dropdown-item title="方式">
          <template #default> <search-popup-mode /> </template>
        </van-dropdown-item>
        <van-dropdown-item title="租金">
          <template #default>
            <search-popup-rent />
          </template>
        </van-dropdown-item>
        <van-dropdown-item disabled>
          <template #title>
            <van-cell @click="isShowType = true" class="pad">筛选</van-cell>
          </template>
        </van-dropdown-item>
        <search-popup-house-type
          v-model="isShowType"
          :show="isShowType"
          @close="isShowType = $event"
        />
      </van-dropdown-menu>
    </div>
  </div>
</template>

<script>
import SearchPopupArea from './components/SearchPopupArea.vue'
import SearchPopupHouseType from './components/SearchPopupHouseType.vue'
import SearchPopupMode from './components/SearchPopupMode.vue'
import SearchPopupRent from './components/SearchPopupRent.vue'
export default {
  components: {
    SearchPopupArea,
    SearchPopupMode,
    SearchPopupRent,
    SearchPopupHouseType
  },
  name: 'search',
  data () {
    return {
      value: '',
      isShowSearch: false,
      isShowType: false
    }
  },

  created () {},
  mounted () {},
  methods: {
    onCity () {
      this.$router.push('/city')
    },
    gomap () {
      this.$router.push('/map')
    },
    goback () {
      this.$router.back()
    },
    openArea () {
      console.log(1)
    }
  }
}
</script>

<style scoped lang="less">
.Search {
  .searchbox {
    background-color: #21b97a;
    width: 100%;
    height: 50px;
    // overflow: hidden;
    .van-search__content {
      background-color: #fff;
      .van-search__label {
        padding: 0 38px 0 0;
        font-size: 14px;
        color: #333;
      }
    }
    .back {
      transform: rotate(0deg);
      color: #ffffff;
      position: absolute;
      top: 15px;
      left: 14px;
      margin-right: 20px;
      font-size: 24px;
    }
    .search {
      position: absolute;
      top: 9px;
      left: 47px;
      width: 280px;
      height: 34px;
    }
    .play {
      transform: rotate(90deg);
      color: #7f7f80;
      position: absolute;
      top: 20px;
      left: 100px;
      margin-right: 20px;
      font-size: 12px;
    }
    .xian {
      transform: rotate(90deg);
      position: absolute;
      color: #e2e5e7;
      top: 18px;
      left: 115px;
      margin-right: 20px;
      font-size: 19px;
    }
    .home {
      position: absolute;
      transform: rotate(0deg);
      right: 15px;
      top: 13px;
      font-size: 30px;
      color: #ffffff;
    }
  }
}
</style>
